在 2015 的 ES6 後，ECMA 開始一年推新一次 ECMAScript，從此之後較常使用年份來說而不是推行版本了，今天讓我們來認識 ES2016 和 ES2017 吧

ES2016

ES2016 的功能較少，主要就是兩點

1. Array.includes：Array.includes 用途為搜尋陣列中是否有指定的元素，若有回傳 true，若無回傳 false，與 Array.indexOf 類似都是用來查詢指定元素的，但 includes 回傳布林值的特性使得透過他來撰寫邏輯會更加清晰明確

const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // false

2. 指數運算符：之前要在 JavaScript 進行指數運算得透過 Math 庫裡面的 pow 函式來達成，但現在透過 ** 即可快速達成

console.log(2 ** 3); // 8
console.log(3 ** 2); // 9

ES2017

在 ES2017 中主要是針對非同步操作提供了一些不一樣的功能

1. await / async：透過 await / async 的寫法可以降低更多 Promise 多層鑲套的問題，其中透過 async 宣告此函式為非同步操作，並且在遇到 await 時會將此非同步操作加至 event loop，需要等待他的回傳有結果後才會繼續執行此函式後面內容，這邊提供個簡單範例來說明

async function foo() {
    console.log('foo 開始');
    await new Promise(resolve => setTimeout(resolve, 0));
    console.log('foo 結束');
}

async function bar() {
    console.log('bar 開始');
    await new Promise(resolve => setTimeout(resolve, 0));
    console.log('bar 結束');
}

console.log('主程序開始');
foo();
bar();
console.log('主程序結束');

順序依次為 主程序開始 => foo 開始 => bar 開始 => 主程序結束 => foo 結束 => bar 結束
2. Object.values / Object.entries：透過這兩個方法和 ES6 時提出的 Object.keys 可以快速地呈現一個物件的內容

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // [a, b, c]
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

3. String padding：String padding 主要提供了兩種方式來幫助字串填充位數，分別是 padStart 和 padEnd

// 第一個參數表達要補到總共幾位，第二個參數表達要補什麼
console.log('5'.padStart(3, '0')); // '005'
console.log('5'.padEnd(3, '0')); // '500'

4. Object.getOwnPropertyDescriptors：此屬性完整的表達了物件屬性的描述符

const obj = {
  property1: 42,
  property2: 'Hello'
};

// 添加一個具有 getter 的屬性
Object.defineProperty(obj, 'property3', {
  get: function() { return 'I am property3'; },
  enumerable: true
});

const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(JSON.stringify(descriptors, null, 2));
/*
{
  "property1": {
    "value": 42,
    "writable": true,
    "enumerable": true,
    "configurable": true
  },
  "property2": {
    "value": "Hello",
    "writable": true,
    "enumerable": true,
    "configurable": true
  },
  "property3": {
    "get": [Function: get],
    "set": undefined,
    "enumerable": true,
    "configurable": true
  }
}
*/

property 1 和 2 為一般的屬性，所以描述符都為 true，而 property3 為一個 getter 所以不會有 value 和 writable 的屬性，而因為我們沒有額外設定 set 所以 set 為 undefined